<template>
  <div class="vuex-item">
    <div class="card">
      <div class="card-content" :class="{ 'change': completed }">
        <div class="content">
          {{title}}
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item" @click.prevent="changeItemVuex">修改为{{completed ? '未' : '已'}}完成</a>
        <a href="#" class="card-footer-item" @click.prevent="delItemVuex">删除</a>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vuexItem',
  props: ['id', 'title', 'completed'],
  methods: {
    changeItemVuex() {
      this.$store.commit('changeItemVuex', this.id)
    },
    delItemVuex() {
      this.$store.commit('delItemVuex', this.id)
    }
  },
  created() {
    console.log('this.props', this.$props)
  }
}
</script>

<style lang="scss" scoped>
  .change{
    background: #ccc;
    text-decoration: line-through;
  }
</style>
